<template>
    <div>
        <h1 style="text-align:center;">
            添加员工
        </h1>
        <!--新增界面-->
			<el-form label-width="70px" :rules="addFormRules" ref="addForm"  :model="addForm" >
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addForm.username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="厂房" prop="plant" :hidden="hidden">
					<el-select v-model="addForm.plant" placeholder="请选择">
						<el-option
						v-for="item in plantOpt"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="车间" prop="workshop" :hidden="!hidden" >
					<el-select v-model="addForm.workshop" placeholder="请选择" >
						<el-option
						v-for="item in workshopOpt"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model.number="addForm.phone" auto-complete="off" ></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="cancelAddUser" >取消</el-button>
				<el-button type="primardy" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
    </div>
</template>
<script>
import {isvalidPhone} from '../../../config/validate'
import { addUser } from '../../api/api';
 //定义一个全局的变量，谁用谁知道
  var validPhone=(rule, value,callback)=>{
      if (value &&　isvalidPhone(value)){
       	callback()
      }else {
        callback(new Error())
      }
  }
  let data;
export default {
    data(){
      return{
		hidden:'', 
        addLoading: false,
        addFormRules: {
            username: [
                { required: true, message: '请输入姓名', trigger: 'blur'}
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur'}
			],
			plant:[
          		{ required: true, message: '请选择厂房', trigger: 'change'}
			],
			workshop:[
          		{ required: true, message: '请选择车间', trigger: 'change'}
			],
			phone:[
				{required: true,message: '请输入正确的11位手机号码',validator: validPhone, trigger: 'blur'}
			]
         },
        //新增界面数据
        addForm: {
			username: '',
			phone: '',
			password: '',
			plant: '', //厂房
			workshop:'',//车间
			founder:''
		},
		plantOpt: [{
			value: '厂房1',
			label: '厂房1'
			}, {
			value: '厂房2',
			label: '厂房2'
			}, {
			value: '厂房3',
			label: '厂房3'
		}],
		workshopOpt: [{
			value: '车间1',
			label: '车间1'
			}, {
			value: '车间2',
			label: '车间2'
			}, {
			value: '车间3',
			label: '车间3'
		}]
      }  
	},
	created(){
		data = JSON.parse(sessionStorage.getItem('data'));
		this.hidden = data['level']==1?false:true;
		this.addForm.level = data['level']+1;
		this.addForm.founder = data['name'];
	},
	methods:{
		cancelAddUser(){
			for(let key in this.addForm){
				this.addForm[key] = ''
			}
		},
		//新增
		addSubmit: function () {
			if(this.hidden){
				this.addForm.plant = data['plant'];
			}else{
				this.addForm.workshop = '0';
			}
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
						this.addLoading = true;
						//NProgress.start();
						let para = Object.assign({}, this.addForm);
						addUser(para).then((res) => {
							this.addLoading = false;
							//NProgress.done();
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.$refs['addForm'].resetFields();
							this.addFormVisible = false;
					//		this.getUsers();
						});
					});
				}
			});
		},
	}
  
}
</script>
<style lang="scss" scoped>
.content-wrapper>div{
	width: 380px;
	position: absolute;
	top:50%;
	left: 50%;
	margin: -200px 0 0 -100px;
	padding: 20px;
	border: 1px solid #eaeaea;

	.dialog-footer{
		text-align: center;

		.el-button{
			margin:0 20px;
		}
	}
}
</style>
